<template>
  <div class="flex items-center self-stretch relative blog-name" @click="handleClick">
    <div class="flex flex-col relative z-10 font-medium cursor-pointer">
      <span class="flex text-3xl nav-title">
        <HanYanLogo/>
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { useCommonStore } from '@/stores/common'
import { useNavigatorStore } from '@/stores/navigator'
import HanYanLogo from '@/components/Logo/HanYanLogo.vue'

export default defineComponent({
  name: 'Logo',
  components: { HanYanLogo },
  setup() {
    const commonStore = useCommonStore()
    const navigatorStore = useNavigatorStore()
    const router = useRouter()
    const handleClick = () => {
      router.push({ path: '/' })
      if (commonStore.isMobile && navigatorStore.openMenu === true) {
        navigatorStore.toggleMobileMenu()
      }
    }
    return {
      handleClick
    }
  }
})
</script>

<style lang="scss" scoped>
@media (max-width: 641px){
  .blog-name{
    //margin: 0.15rem auto 0;
  }
}
.logo-image {
  height: 200px;
  width: 200px;
  max-width: 200px;
  top: -60px;
  left: -60px;
  opacity: 0.05;
  @apply absolute mr-2 rounded-full;
}
</style>
